<style lang="less" scoped>
 .upload_file{
    width: 30vw;
    background: #eee;
    position:relative;
    border-radius:0 0 5px 5px;
  }
  .close{
    font-size: 24px;
    right:10px;
    top:5px;
    position:absolute;
    z-index: 9999;
    color: white;
    cursor: pointer;
  }
  .header_title{
    border-radius:5px 5px 0 0;
    height:40px;
    background: #26A8F8;
    color: white;
    font-size: 24px;
    text-align: center;
    padding-top: 5px;
  }
  .upload-demo{
    margin-top: 40px;
    margin-left: 6vw;
  }
</style>
<template>
  <div class="upload_file">

    <div class="header_title">上传文件</div>
    <div class="close" @click="cancel()">X</div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :limit = "1"
      action="https://jsonplaceholder.typicode.com/posts/"
      :http-request="uploadSectionFile"
      :file-list="fileList"
      :before-upload="beforeAvatarUpload"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx或者xls文件</div>
    </el-upload>

    <div style="height:40px;"></div>
  </div>
</template>

<script>
  import { import_file } from '@/request/api';

	export default {
	  data () {
	    return {
        fileList:[]
	    }
	  },
    mounted(){

    },
    methods:{
      beforeAvatarUpload(file) {
        console.log(file);
        // const iswps = (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel');

        // if (!iswps) {
        //   this.$message.error('上传只能是 xlsx或者xls 格式!');
        // }

        // return iswps;
        return true;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadSectionFile(param){
        var formData = new FormData();
        formData.append('files[new][0]',param.file);
        import_file(formData).then(res => {
          this.$emit("close",'ssss');
          // this.$emit('close');
        })
      },
      cancel(){
        this.$emit('close');
      }
    }

	}
</script>


